<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示与可见性</title>
    <style>

        img{
            width: 200px;
            height: 200px;
            background-color: orange;
            margin-left: 10px;
            margin-right: 10px;

        }

        #sp2{

            visibility: hidden;

        }

        #img2{

            display: none;
        }

        .spand{

            width: 100px;
            height: 100px;
            background-color: #8cebff;
            display: block;
            margin-top: 10px;

        }

        .div1{
            background-color: beige;
            width: 100px;
            height: 100px;
            margin-right: 10px;
            display: inline;

        }


    </style>
</head>
<body>

<h2>名词解释</h2>
<hr>
<p>
    display:设置一个元素如何显示 <br>
    visibility:设置一个属性是否隐藏,相当于oc的hidden属性
</p>

<h2>使用visibility隐藏元素</h2>
<hr>
<img class="span1">
<img class="span1"  id="sp2">
<img class="span1">
<img class="span1"><

<p style="font-size: 18px;color: red"><b>注意:</b>使用visibility隐藏元素,不会影响原有布局</p>

<h2>使用display隐藏元素</h2>
<hr>
<img class="span1">
<img class="span1" id="img2">
<img class="span1">
<img class="span1">

<p style="font-size: 18px;color: red"><b>注意:</b>使用display隐藏元素,会影响原有布局</p>

<h2>块元素和内联元素互换</h2>
<hr>
<h4>内联元素转换成块元素,span变块元素</h4>
<hr>
<span class="spand">邢伟新</span>
<span class="spand">邢伟新1</span>
<span class="spand">邢伟新2</span>
<span class="spand">邢伟新3</span>

<h4>块元素转换成内敛原色,div转换内联元素</h4>

<hr>
<div class="div1">邢伟新1</div>
<div class="div1">邢伟新2</div>
<div class="div1">邢伟新3</div>
<div class="div1">邢伟新4</div>













</body>
</html>